<template>
    <div v-if="show">
        <el-form class="config-form" label-width="70px" label-position="left">
            <div class="toolbar" @mousedown.stop>
                <div class="toolbar-wh-row">
                    <p class="toolbar-row-title">Position</p>
                    <span class="toolbar-position-inp">top
                        <el-input type="number" v-model="data.options.top" />
                    </span>
                    <span class="toolbar-position-inp">left
                        <el-input type="number" v-model="data.options.left" />
                    </span>
                </div>
                <div class="toolbar-wh-row">
                    <p class="toolbar-row-title">Size</p>
                    <span class="toolbar-size-inp">width
                        <el-input type="number" v-model="data.options.width" />
                    </span>
                    <span class="toolbar-size-inp">height
                        <el-input type="number" v-model="data.options.height" />
                    </span>
                </div>
            </div>
            <component :is="data.type" :data="data" :moban="moban" :form-list="formList" :menu-result="menuResult" :select-dict="selectDict"/>
            <common-set-config :data="data"/>
            <!-- 图标 -->
            <el-form-item label="图标" v-if="Object.keys(data.options).indexOf('iconName')>=0">
                <el-button @click="dialogIconVisible = true" type="primary" >选择图标</el-button>
                <el-input disabled v-model="data.options.iconName"/>
            </el-form-item>
        </el-form>
        <el-dialog
            title="选择图标"
            :visible.sync="dialogIconVisible"
            width="60%">
            <icon-selector @change="changeIcon"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogIconVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogIconVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
.toolbar{
    width: 100%;
    padding:  15px 15px 15px 15px;
    box-shadow: 0 0 2px #AAA;
    box-sizing: border-box;
    background-color: white;
    margin-bottom: 10px;
}
.toolbar-wh-row{

    margin-bottom: 20px;
}
.toolbar-row-title{
    width: var(--toolbar-width);
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    margin: 0 0 3px 0;
    color: #1A173B;
}
.toolbar-position-inp, .toolbar-size-inp{
    width: 90px;
    font-size: 11px;
    color: #BBB;
    font-weight: 300;
    display: inline-block;
    position: relative;
}

.toolbar-size-inp input,.toolbar-position-inp input{
    width: 70px;
    display: inline-block;
    border: 1px solid #bfbfca;
    margin-top: 2px;
    height: 16px;
}
.toolbar-check-inp{
    color: #445477;
    font-size: 13px;
    width: 180px;
    display: inline-block;
    margin: 2px 0;
}
.toolbar-row-title+label{
    margin-top: 5px;
}
.toolbar-check-inp input{
    border: 1px solid #bfbfca;
}
.to-top-icon, .to-bottom-icon{
    margin: 10px 30px;
    cursor: pointer;
}

</style>
<script>
import Draggable from 'vuedraggable'
import IconSelector from '@/components/IconSelector'
import SetConfig from '../pc/setConfig'
import CommonSetConfig from './CommonSetConfig'
export default {
    components: {
        Draggable,
        IconSelector,
        CommonSetConfig,
        ...SetConfig
    },
    props: ['data', 'selectDict', 'menuResult','moban','formList'],
    data() {
        return {
            dialogIconVisible: false,
            validator: {
                type: null,
                required: null,
                pattern: null,
                range: null,
                length: null
            }
        }
    },
    computed: {
        show() {
            if (this.data && Object.keys(this.data).length > 0) {
                return true
            }
            return false
        }
    },
    watch: {
        'data.options.isRange': function(val) {
            if (typeof val !== 'undefined') {
                if (val) {
                    this.data.options.defaultValue = null
                } else {
                    if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) { this.data.options.defaultValue = '' }
                }
            }
        },
        'data.options.required': function(val) {
            if (val) {
                this.validator.required = { required: true, message: `${this.data.name}必须填写` }
            } else {
                this.validator.required = null
            }

            this.$nextTick(() => {
                this.generateRule()
            })
        },
        'data.options.dataType': function(val) {
            if (!this.show) {
                return false
            }

            if (val) {
                this.validator.type = { type: val, message: this.data.name + '格式不正确' }
            } else {
                this.validator.type = null
            }

            this.generateRule()
        },
        'data.options.pattern': function(val) {
            if (!this.show) {
                return false
            }

            if (val) {
                this.validator.pattern = { pattern: val, message: this.data.name + '格式不匹配' }
            } else {
                this.validator.pattern = null
            }

            this.generateRule()
        }
    },
    methods: {
        changeIcon(e) {
            this.data.options.iconName = e
        },
        handleOptionsRemove(index) {
            if (this.data.type === 'grid') {
                this.data.columns.splice(index, 1)
            } else {
                this.data.options.options.splice(index, 1)
            }
        },
        handleAddOption() {
            if (this.data.options.showLabel) {
                this.data.options.options.push({
                    value: '新选项',
                    label: '新选项'
                })
            } else {
                this.data.options.options.push({
                    value: '新选项',
                    label: '新选项'
                })
            }
        },
        handleAddColumn() {
            this.data.columns.push({
                span: '',
                list: []
            })
        },
        generateRule() {
            this.data.rules = []
            Object.keys(this.validator).forEach(key => {
                if (this.validator[key]) {
                    this.data.rules.push(this.validator[key])
                }
            })
        },
        handleSelectMuliple(value) {
            if (value) {
                if (this.data.options.defaultValue) {
                    this.data.options.defaultValue = [this.data.options.defaultValue]
                } else {
                    this.data.options.defaultValue = []
                }
            } else {
                if (this.data.options.defaultValue.length > 0) {
                    this.data.options.defaultValue = this.data.options.defaultValue[0]
                } else {
                    this.data.options.defaultValue = ''
                }
            }
        }
    }
}
</script>

